<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jsud</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<style type="text/css">
table.sudoku {
	border:2px solid black;	
}
table.sudoku tr td {
	width:50px;
	height:50px;
	font-weight:bold;
	font-size:24px;
	text-align:center;
	border:1px solid #DFDFDF;
}
table.sudoku tr.ult td {
	border-bottom:2px solid black;	
}
table.sudoku tr td.der {
	border-right:2px solid black;	
}
table.sudoku tr td.ilum {
	background-color: #FFFDDD;
}
table.sudoku tr td.activo {
	background-color:#FDDBB5;
	cursor:pointer;
}
table.sudoku tr td.error {
	background-color:#FFC6C6;	
}
</style>
<table cellpadding="0" cellspacing="0" class="sudoku">
<tr>
<td>&nbsp;</td><td>&nbsp;</td><td class="der">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td class="der">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td><td>&nbsp;</td><td class="der">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td class="der">&nbsp;</td><td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr class="ult">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="der">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td class="der">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="der">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td class="der">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="der">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td class="der">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr class="ult">
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="der">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td class="der">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="der">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td class="der">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="der">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td class="der">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td class="der">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td class="der">&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td>
</tr>
</table>
<script type="text/javascript">
function getNumber($row,$column) {
	$elem = $("table.sudoku tr:eq(" + $row + ") td:eq(" + $column + ")").html() + "";
	if($elem=="&nbsp;") $elem = "";
	return $elem;
}
function setNumber($row,$column,$number) {
	if($number + "" == "") {
		$("table.sudoku tr:eq(" + $row + ") td:eq(" + $column + ")").html("&nbsp;");
		return true;	
	}
	$("table.sudoku tr:eq(" + $row + ") td:eq(" + $column + ")").html($number);
	return true;
}
function ExisteLine($number,$row,$column) {
	for(i = 0; i<9; i++) {
	}
}
$(function() {
	$("table.sudoku tr td").hover(function() {		
		$celda = $(this);
		var column = $(this).parent().children().index(this);
	    var row = $(this).parent().parent().children().index(this.parentNode);
		$n = getNumber(row,column);
		$("table.sudoku tr td:contains(" + $n +")").addClass("ilum");
		$celda.removeClass("ilum").addClass("activo");		
	},function() {
		$("table.sudoku tr td").removeClass("ilum");
		$("table.sudoku tr td").removeClass("activo");
	});
	$("table.sudoku tr td").click(function() {
		var column = $(this).parent().children().index(this);
	    var row = $(this).parent().parent().children().index(this.parentNode);
		$n = getNumber(row,column);
		$number = prompt("Numero",$n);
		setNumber(row,column,$number);
	    //alert([column, ',', row].join(''));		
	});
		
});
</script>
</body>
</html>